// -----------1、获取学生数据 并渲染到表格----------
async function renderStudent() {
    const { data: res } = await axios.get('./students')
    let arr = res.data.map(item => {
        return `
        <tr>
                      <td>${item.name}</td>
                      <td>${item.age}</td>
                      <td>${item.gender === 0 ? '男' : '女'}</td>
                      <td>${item.group}组</td>
                      <td>${item.hope_salary}</td>
                      <td>${item.salary}</td>
                      <td>${item.province} ${item.city} ${item.area}</td>
                      <td>
                        <a href="javascript:;" class="text-success mr-3"><i data-id="${item.id}"class="bi bi-pen"></i></a>
                        <a href="javascript:;" class="text-danger"><i data-id="${item.id}"class="bi bi-trash"></i></a>
                      </td>
                    </tr>
        `
    })
    document.querySelector('tbody').innerHTML = arr.join('')
}
renderStudent()

// 添加操作，需要提前准备，比如模态框的用法、省市县联动效果
// bootstrap模态框使用方法，两个步骤: 1. 实例化  2. 调用方法显示或隐藏
// let addModal = new bootstrap.Modal(模态框盒子)
let addModal = new bootstrap.Modal(document.querySelector('#modal'))

// addModal.show() // 让模态框显示
// addModal.hide() // 让模态框隐藏

// 点击 + 按钮的时候，让模态框显示
document.querySelector('#openModal').addEventListener('click', function () {
    // 重置表单
    document.querySelector('#form').reset()
    // 修改标题
    document.querySelector('h5.modal-title').innerHTML = '添加学员'
    // 让模态框显示
    addModal.show()
})

// 下面的函数 完成省市县联动
async function initCity() {
    let province = document.querySelector('[name=province]')
    let city = document.querySelector('[name=city]')
    let area = document.querySelector('[name=area]')

    //先获取省

    const { data: res } = await axios.get('/api/province')
    let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
    province.innerHTML = '<option value="">--省份--</option>' + arr.join('')

    // 切换省的时候 获取市
    province.addEventListener('change', async function () {
        let pname = province.value // 获取当前选择的省的名字
        // 省切换后 无论如何 都要重置县
        area.innerHTML = '<option value="">--地区--</option>'
        // 如果没有省 则需要重置市
        if (pname === '') {
            return (city.innerHTML = '<option value="">--城市--</option>')
        }
        const { data: res } = await axios.get('/api/city', { params: { pname } })
        let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
        city.innerHTML = '<option value="">--城市--</option>' + arr.join('')

    })


    // 切换市的时候 获取县
    city.addEventListener('change', async function () {
        let pname = province.value // 获取当前选择的省的名字
        let cname = city.value // 获取当前 选则的市
        // 没有选择市 要重置县
        if (cname === '') {
            return (area.innerHTML = '<option value="">--地区--</option>')
        }
        const { data: res } = await axios.get('/api/area', { params: { pname, cname } })
        let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
        area.innerHTML = '<option value="">--地区--</option>' + arr.join('')

    })
}
initCity()


// -----点击弹窗中 确认的按钮的时候

document.querySelector('#submit').addEventListener('click', async function (e) {
    e.preventDefault()
    //获取表单各个元素的值
    let data = val(document.querySelector('#form'))
    // console.log(data);
    // 根据接口要求 数字类型 必须用纯数字 
    data.age = +data.age // 若果使用 + 的方式转换 不能有空格
    data.gender = Number(data.gender)
    data.group = +data.group
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary


    // 点击弹出层中的确认的时候，根据弹出层中的标题判断一下，是添加操作还是修改操作
    let title = document.querySelector('.modal-title').innerHTML
    if (title === '添加学员') {
        const { data: res } = await axios.post('/students', data)
        message.success(res.message) // 使用插件提示
        modal.hide() // 关闭弹出层
        renderStudent() // 更新页面数据
    } else if (title === '修改学员') {
        let id = document.querySelector('.modal-title').dataset.id
        // 发送请求，进行修改
        const { data: res } = await axios.put(`/students/${id}`, data)
        message.success(res.message) // 使用插件提示
        modal.hide() // 关闭弹出层
        renderStudent() // 更新页面数据
    }
})


// ------------删除操作-----
document.querySelector('tbody').addEventListener('click', async function (e) {

    // 判断 点击的是否是删除
    if (e.target.classList.contains('bi-trash')) {
        let id = e.target.dataset.id
        // if(!confirm('确定删除吗')) return
        try {
            const { data: res } = await axios.delete(`/students/${id}`)
            message.success('删除成功')
            renderStudent()
        } catch (e) {
            message.error('删除失败')
        }
    }

    // 判断是否点击的是编辑
    if (e.target.classList.contains('bi-pen')) {
        let id = e.target.dataset.id
        // 修改标题
        document.querySelector('h5.modal-title').innerHTML = '修改学员'
        // 设置自定义属性，存储id
        document.querySelector('h5.modal-title').setAttribute('data-id', id)
        // console.log('说明点击了编辑', id);
        // 说明点击了编辑
        addModal.show() // 显示弹窗
        //数据回填---》首先有数据 --》根据id发送请求
        const { data: res } = await axios.get(`/students/${id}`)
        // console.log(res);
        // 在数据回填之前 应该吧市、县、渲染到第2、3个下拉框中
        let p1 = axios.get('/api/city', { params: { pname: res.data.province } })
        let p2 = axios.get('/api/area', { params: { pname: res.data.province, cname: res.data.city } })
        const result = await Promise.all([p1, p2])
        let arr2 = result[0].data.data.map(item => `<option value="${item}">${item}</option>`)
        document.querySelector('[name=city').innerHTML = `<option value="">--城市--</option>` + arr2.join('')

        let arr3 = result[1].data.data.map(item => `<option value="${item}">${item}</option>`)
        document.querySelector('[name=area').innerHTML = `<option value="">--地区--</option>` + arr3.join('')
        // val(表单，数据)
        val(document.querySelector('#form'), res.data)
    }
})